<template>
	<view class="box">
		<view class="beloop">
			<view class="belooprow" :style="item.style" v-for="(item,index) in list" :key="index"
				@click="toList(item.status,item.id)">
				<view class="image">
					<image class="img" :src="item.pic_url" mode="widthFix"></image>
					<!-- <view class="no-goods" v-if="item.status == 0">
						<view class="no-title">
							今日无货
						</view>
					</view> -->
					<view class="status" v-if="item.status == 1">
						{{item.start_at}}-{{item.end_at}}
						<text class="notice">抢货预告</text>
					</view>
					<view class="status" v-if="item.status == 2">
						{{item.start_at}}-{{item.end_at}}
						<text class="notice">正在抢货</text>
					</view>
					<view class="no-goods" v-if="item.status == 3">
						<view class="no-title" style="width: 268rpx;">
							珠宝介绍回放
						</view>
					</view>
					<image class="play"
						:src="imgprefix+'/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png'"></image>
				</view>

				<view class="title u-line-2">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="../../static/image/icon/back-top.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newList: [],
				boxHeight: [],
				list: [],
				columnHs: [], // 列高度
				aid: 0,
				apage: 1,
				alimit: 10,
				totalCount: 0,
				page_count: 0,
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,

				imgprefix: this.$siteInfo.imgroot,
			}
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			this.aid = options.id
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// this.imgprefix = this.$siteInfo.imgroot
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/gospeed/list',
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				query: {

				}
			});
		},
		onShow() {
			this.appPort(this.aid)
		},
		onReachBottom() {
			if (this.apage < this.page_count) {
				this.apage++;
				this.appPort(this.aid)
			} else {
				this.apage = 1;
				this.appPort(this.aid)
				/* let appList = this.$storage.getStorageSync('mersqList')
				if (appList) {
					this.list = this.list.concat(appList)
				} else {
					this.appPort(this.aid)
				} */
			}
		},
		onPullDownRefresh() {
			this.appPort(this.aid)
			this.list = []
			// this.$storage.removeStorageSync('mersqList')
			this.apage = 1
			this.boxHeight = []
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
			list: function(newVal, oldVal) {
				// console.log(newVal,666666,oldVal,777777777);
				if (newVal != oldVal) {
					// #ifdef MP-WEIXIN
					// this.newList = this.newList.concat(newVal)
					// console.log(this.newList);
					// #endif
					this.comlist(newVal, oldVal)
				}
			}
		},
		methods: {
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			listJump(id, list, stime, etime) {
				// 当前时间
				let catime = new Date()
				// 开始时间
				let satime = new Date(stime.replaceAll('-', '/'))
				// 结束时间
				let eatime = new Date(etime.replaceAll('-', '/'))

				if (satime > catime) {
					this.sup_status = 1
				} else if (satime <= catime && catime < eatime) {
					let salist = []
					salist = list.filter((itm, index) => {
						return itm.goods_stock != 0
					})
					if (salist.length == 0) {
						this.sup_status = 3
					} else {
						this.sup_status = 2
					}
				} else if (catime >= eatime) {
					this.sup_status = 3
				}
				return this.sup_status
			},
			toList(status, id) {
				if (status != 1) {
					uni.navigateTo({
						url: '/pages/goods/vi?id=' + id
					})
				}
			},
			appPort(id) {
				this.$request({
					url: this.$api.navs.mersq,
					data: {
						page: this.apage,
						limit: this.alimit,
						status: 1
					}
				}).then((res) => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						let listvideo = []
						let status = ''
						listvideo = listvideo.concat(res.data.list)
						listvideo = listvideo.filter(res => {
							status = this.listJump(res.id, res.goodslist, res.start_at, res.end_at)
							res.start_at = res.start_at.substr(11, 5)
							res.end_at = res.end_at.substr(11, 5)
							this.$set(res, 'status', status);
							this.$set(res, 'start_at', res.start_at);
							this.$set(res, 'end_at', res.end_at);
							return res
						})
						this.list = this.list.concat(listvideo)
						// this.$storage.setStorageSync('mersqList', this.list)
						this.page_count = res.data.pagination.page_count
					}
				}).catch(() => {
					uni.stopPullDownRefresh()
				})
			},
			uGetRect(element) {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect(data => {
						resolve(data);
					}).exec();
				})
			},
			async comlist(newVal, oldVal) {
				let mark = oldVal.length;
				let len = this.list.length;
				let style = '';
				this.$nextTick(async function() {
					const query = uni.createSelectorQuery().in(this);
					let dataArray = [];
					await new Promise((resolve, reject) => {
						setTimeout(() => {
							query.selectAll('.beloop .belooprow').fields({
								size: true
							}, data => {
								dataArray = data;
								resolve()
							}).exec();
						}, 500)
					})
					for (let i = mark; i < len; i++) {
						if (i < 2) {
							if (i == 0) {
								style = `top: 0; left: 16rpx;`
							} else {
								style = `top: 0; left: 382rpx;`
							}
							this.boxHeight.push(dataArray[i].height)
						} else {
							let minHeight = this.boxHeight[0];
							if (minHeight > this.boxHeight[1]) {
								minHeight = this.boxHeight[1];
								this.boxHeight[1] = minHeight + dataArray[i].height;
								style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 382rpx;`
							} else {
								this.boxHeight[0] = minHeight + dataArray[i].height;
								style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 16rpx;`
							}
						}
						this.$set(newVal[i], 'style', style);
						this.$forceUpdate();
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 循环 */
	.beloop {
		// width: 686rpx;
		margin: 48rpx auto 12rpx;
		position: relative;
	}

	.belooprow {
		position: absolute;
		top: 0;
		left: 0;
		margin-bottom: 32rpx;
		width: 350rpx;
		// height: 454rpx;
		background: #FFFFFF;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.belooprow .image {
		width: 100%;
		// height: 470rpx;
		position: relative;

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 208rpx;
				padding: 0 48rpx;
				height: 56rpx;
				border-radius: 130rpx;
				background-color: rgba($color: #000000, $alpha: 0.4);
				backdrop-filter: blur(9px);
				font-size: 28rpx;
				text-align: center;
				line-height: 56rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.play {
			position: absolute;
			/* width: 80rpx;
			height: 80rpx;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%); */
			width: 40rpx;
			height: 40rpx;
			bottom: 30rpx;
			right: 30rpx;
		}

		.status {
			width: 350rpx;
			height: 48rpx;
			padding: 0 0 0 156rpx;
			text-align: center;
			background: rgba(0, 0, 0, .4);
			position: absolute;
			left: 0;
			top: 16rpx;
			color: #FFFFFF;
			font-size: 20rpx;
			line-height: 50rpx;

			.notice {
				font-size: 24rpx;
				width: 156rpx;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				text-align: center;
				background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
				border-radius: 0 192rpx 192rpx 0;
			}
		}
	}

	.belooprow .image .img {
		width: 100%;
		height: 100%;
	}

	.belooprow .title {
		margin: 8rpx 14rpx 24rpx;
		font-size: 12px;
		line-height: 18px;
		color: rgba(0, 0, 0, 0.84);
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
